<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">		 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scrolling Relative-Positioned Layer Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import "css/scroll-rel.css";
</style>
<script src="js/dw_scrollObj.js" type="text/javascript"></script>
<script src="js/dw_hoverscroll.js" type="text/javascript"></script>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_slidebar.js" type="text/javascript"></script>
<script src="js/dw_scroll_aux.js" type="text/javascript"></script>
<script type="text/javascript">
/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine 
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

function initScrollLayer() {
  // arguments: id of layer containing scrolling layers (clipped layer), id of layer to scroll, 
  // if horizontal scrolling, id of element containing scrolling content (table?)
  var wndo = new dw_scrollObj('wn', 'lyr1');
  
  // bSizeDragBar set true by default (explained at www.dyn-web.com/dhtml/scroll/ )
  // wndo.bSizeDragBar = false;
  
  // arguments: dragBar id, track id, axis ("v" or "h"), x offset, y offset
  // (x/y offsets of dragBar in track)
  wndo.setUpScrollbar("dragBar", "track", "v", 1, 1);
  
  // pass id('s) of scroll area(s) if inside table(s)
  // i.e., if you have 3 (with id's wn1, wn2, wn3): dw_scrollObj.GeckoTableBugFix('wn1', 'wn2', 'wn3');
  dw_scrollObj.GeckoTableBugFix('wn'); 
}

</script>	
</head>
<body onload="initScrollLayer()">

<table class="main" cellspacing="0" cellpadding="8" border="0">
	<tr>
	  <th colspan="3">Scroll Layers in a Table</th>
	</tr>
	<tr>
    <td class="navs">
      <ul>
      <!-- Links to load new layers in scroll area. 
           Arguments: id of scroll area (first argument passed to constructor), id of layer to load,
           if scrolling horizontally, id of element containing scrolling content (table) -->
      	<li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr1'); return false">Intro</a></li>
      	<li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr2'); return false">Set Up</a></li>
        <li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr3'); return false">Scrollbars</a></li>
        <li><a href="javascript:;" onclick="dw_scrollObj.loadLayer('wn','lyr4'); return false">More</a></li>
      </ul>
      
    </td>
	  <td>
<!-- relative positioned layer that contains scrolling layers -->		
<div id="hold">
<div id="wn"> 
	<!-- scrolling layers start here -->
	<div id="lyr1" class="content">
  	<h2>Introduction</h2>
  	<p>This example positions the scrolling layers in a cell of a centered table. The links to the left load new content into the layer for scrolling.</p>
    <p>The scroll arrows are activated on mouseover in this example. The file <a href="js/dw_hoverscroll.js">dw_hoverscroll.js</a> adds this functionality to the   <code><a href="js/dw_scrollObj.js">dw_scrollObj</a></code>.</p>
    <p>If you prefer that the scroll arrows be activated onclick rather than onmouseover, you can use the <a href="js/dw_glidescroll.js">glide-scroll code</a> instead.</p>
    <p>Scrollbars are optional. The files <a href="js/dw_slidebar.js">dw_slidebar.js</a> and <a href="js/dw_scroll_aux.js">dw_scroll_aux.js</a> add this functionality to the <code>dw_scrollObj</code>.</p>
    <h3>Gecko Bug</h3>
  	<p>The code includes a bug fix necessary for Netscape 6+/Mozilla when scrolling vertically in tables. Without this fix the table would shrink and expand while scrolling for all but the most recent versions of Mozilla.</p>
    <p>The bug fix is often needed for horizontal scrolling as well. Without it, some Gecko-based browsers will tend to scramble the layout.</p>
    <p>The <code>dw_scrollObj.GeckoTableBugFix</code> function removes the scrolling layers from the table and uses the relative positioned containing layer's position to superimpose the layers over the table.</p>
	</div>
	
	<div id="lyr2" class="content">
  	<h2>Setting Up the Layers</h2>
  	<p>Div's are nested three deep for scrolling layers inline. The outer-most layer (usually assigned an id of <code>hold</code> or <code>holder</code>) is relative positioned, has width and height settings, and overflow hidden. </p>
    <p>The scroll area itself is defined by a &quot;window&quot; div (usually assigned an id of <code>wn</code> or <code>wn1</code>), with width, height and clip settings, and overflow hidden. </p>
    <p>The content that scrolls is contained in the innermost div (or div's). You can add as many content layers as you like within any given &quot;window&quot; div.</p>
    <p>Scroll areas to be positioned absolute do not require the outermost (<code>hold</code>) layer, although it is often a convenient container for the scroll links.</p>
    <p><strong><em>Note: </em></strong>For best cross-browser cooperation, do not fundamentally change the style specifications for the layers, other than adjusting width and height. Removing clip or overflow settings or changing the position to relative on the window or content layers may cause some browsers to cease functioning properly.</p>
	</div>
	
	<div id="lyr3" class="content">
		<h2>Implementing Scrollbars</h2>
		<p>You can set up scrollbars using graphics of your choice and adjust their style specifications accordingly.</p>
    <p>Notice that the height of the drag bar adjusts according to the amount of content in the layer. This is an optional feature that can be turned off with a simple property setting. See code comments in the head of the document.</p>
    <p>The <a href="http://www.dyn-web.com/dhtml/scroll/">main presentation page for scrolling layers</a> contains more detailed information about the scrollbars and how to set them up.</p>
	</div>
  
  <div id="lyr4" class="content">
	  <h2>Multiple Scroll Areas</h2>
		<p>You can follow the format described and demonstrated in this example to add more than one scroll area. See the example with <a href="scroll-multi.html">multiple scrolling areas</a> for guidance. Even though that example uses absolute positioning, the pattern for setting up the layers remains the same. Just remember that all id's need to be unique.</p>
    <p>Remember to pass the id's for areas that scroll in tables to the <code>GeckoTableBugFix</code> function so Netscape 6+ and Mozilla will be able to extract their layers and function properly. (See code comments in the head of the document for more information.)</p>
	</div>
	
	
</div>  <!-- end wn  -->
</div>	<!-- end hold (relative layer) -->	
		</td>
		<td id="scrollLinks"><div id="scrollbar">
          <div id="up"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','up')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-up.gif" width="11" height="11" alt="" /></a></div>
          <div id="track">
            <div id="dragBar"></div>
          </div>
          <div id="down"><a href="javascript:;" onclick="return false" onmouseover="dw_scrollObj.initScroll('wn','down')" onmouseout="dw_scrollObj.stopScroll('wn')" onmousedown="dw_scrollObj.doubleSpeed('wn')" onmouseup="dw_scrollObj.resetSpeed('wn')"><img src="images/btn-dn.gif" width="11" height="11" alt="" /></a></div>
      </div></td>
	</tr>
	<tr>
		<td class="text" colspan="3">
    	<a href="http://www.dyn-web.com">www.dyn-web.com</a>
		</td>
 </tr>
</table>


</body>
</html>
